<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%
    HttpSession sess = request.getSession();
    String message = (String)sess.getAttribute("msg");
    if(message == "" || message == null){
%>
<%
}else{
%>
<%
    if (message == "注册成功"){
        sess.setAttribute("msg", "");
%>
<script type="text/javascript">
    parent.location.href = "login.jsp";
</script>
<%
    }
%>
<script type="text/javascript">
    alert("<%=message %>");
</script>
<%
        sess.setAttribute("msg", "");
    }

%>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        <!-- 注册表单的样式 -->
        body {
            background: url("img/base.jpg") no-repeat fixed 0 0;
            margin: 0 auto;
            background-size: cover;
            width: 100%;
        }
        .para{
            font-size: 14px;
            font-weight: lighter;
            text-align: center;
        }
        .rg_layout {
            width: 900px;
            height:500px;
            border: 8px solid #EEEEEE;
            background-color: white;
            margin: auto;
        }
        .rg_left {
            float: left;
            margin: 15px;
        }
        .rg_center {
            float: left;
            align-items: center;
        }
        .rg_right {
            float: right;
            margin: 15px;
        }
        .rg_left > p:first-child {
            color:#FFDF26;
            font-size: 20px;
        }
        .rg_left > p:last-child {
            color:#FFDF26;
            font-size: 20px;
        }
        .rg_right > p:first-child {
            font-size: 15px;
        }

        .rg_right p a {
            color:pink;
        }
        .td_left {
            width: 100px;
            height: 80px;
            text-align: right;
        }
        .td_right {
            padding-left: 50px ;
        }
        #username, #password, #password2, #email, #accountNum,#telphone{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            border-radius: 5px;
            padding-left: 10px;
        }
        #btn_sub {
            width: 120px;
            height: 40px;
            background-color: #FFDF26;
            border: 1px solid #FFD026 ;
            border-radius: 12px;
            cursor: pointer;
        }
        #btn_subs {
            width: 120px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026 ;
            border-radius: 12px;
            cursor: pointer;
        }
        .error {
            color:yellow;
        }
        #td_sub {
            padding-left: 150px;
        }
    </style>
    <script>
        // js正则验证相关字符的意义
        // 1.  /^$/ 这个是个通用的格式。
        // ^ 匹配输入字符串的开始位置；$匹配输入字符串的结束位置
        // 2. 里面输入需要实现的功能。
        // * 匹配前面的子表达式零次或多次；
        // + 匹配前面的子表达式一次或多次；
        // ？匹配前面的子表达式零次或一次；
        // \d  匹配一个数字字符，等价于[0-9]
        window.onload = function(){
            document.getElementById("form").onsubmit = function(){
                return checkUsername() && checkPassword();
            };
            document.getElementById("username").onblur = checkUsername;
            document.getElementById("password").onblur = checkPassword;

        }
        function checkUsername(){
            //固定六位到十位字符用户名包含大小写字母与数字的组合
            var username = document.getElementById("username").value;
            var reg_username =/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/;
            var flag = reg_username.test(username);
            var s_username = document.getElementById("s_username");
            if(flag){
                s_username.innerHTML = "<img width='35' height='25' src='img/right.png'/>";
                return true;
            }else{
                s_username.innerHTML = "请输入6~10位字母和数字的组合";
                return false;
            }
        }
        // 密码校验
        function checkPassword(){
            //固定六位到十二位字符密码包含大小写字母与数字的组合，当然你也可以改变正则方式，详情可见https://www.jb51.net/article/115170.htm
            var password = document.getElementById("password").value;
            var reg_password = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
            var flag = reg_password.test(password);
            var s_password = document.getElementById("s_password");
            if(flag){
                s_password.innerHTML = "<img width='35' height='25' src='img/right.png'/>";
                return true;
            }else{
                s_password.innerHTML = "请输入6~12位字母和数字的组合";
                return false;
            }
        }
        function checkform(){
            //表单总确认
            if(checkUsername() && checkPassword ()){
                // window.alert("恭喜您！注册成功");
                return true;
            }else{
                window.alert("请您核对一下您的注册信息是否有误");
                return false;
            }
        }

    </script>

</head>

<body style="background-image: url(img/base.jpg)">
<div class="rg_layout" style="background-image: url(img/back1.png)">
    <div class="rg_left">
        <p>USER LOGIN</p>
        <p>用户登录</p>
    </div>
    <div class="rg_center">
        <div class="rg_form">
            <form action="/login" id="form" method="post" onsubmit="return true">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right">
                            <!-- onblur监听用户输入的值 -->
                            <input type="text" name="account_name" id="username" placeholder="请输入用户名" onblur="checkUsername(this.value)">
                            <span id="s_username" class="error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right">
                            <input type="password" name="account_pwd" id="password" placeholder="请输入密码" >
                            <span id="s_password" class="error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" id="td_sub">
                            <input type="submit" id="btn_sub" value="登录" onclick="checkform();">
                            <input type="reset" id="btn_subs" value="重 置">
                        </td>
                    </tr>
                </table>
            </form>
            <p class="para">无账号?&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="register.jsp" style="text-decoration: none">立即注册</a></p>
        </div>
    </div>
</div>
</body>
</html>